<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
<!--    <script src="../js/dayjs.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script>


<!--

        过滤器：对显示的数据进行格式化之后再显示
        语法：
        1、注册过滤器：
        Vue.filter(name,cellback) 或 new Vue{ filters ：{} }
        2、使用过滤器
        {{xxx | 过滤器名 }}  或者 v-bind：属性 = “xxx | 过滤器名”

        备注
        过滤器可以接受额外参数，也可以串联
        并没有改变原来的数据，是产生新的数据
-->
</head>
<body>
<div  id="root">
    <h2>显示时间</h2>
    <h2>{{time}}</h2>
    <h2>计算属性</h2>
    <h2>{{fmtTime}}</h2>
    <h2>方法</h2>
    <h2>{{getTime()}}</h2>
    <h2>过滤器</h2>
    <h2>{{time | timeformater}}</h2>


</div>

<script type="text/javascript">
    Vue.filter('timeformater',function (value) {
        return dayjs(value).format('YYYY-MM-DD HH：mm：ss')
    })
    Vue.config.productionTip = false
    const  vm = new Vue({
        el:'#root',
        data:{
            time:1621561377603,
        },
        computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH：mm：ss')
            }
        },
        methods:{
            getTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH：mm：ss')
            }
        },
        filters:{
        }
    })
</script>

</body>
</html>